<script setup lang="ts">
import { h, onMounted, render } from 'vue'
// h  -> 等价于 createVNode 创建虚拟dom节点
// render -> 渲染

// h
// 参数一: 虚拟dom节点类型 img span div h1 ...
// 参数二: 虚拟dom拥有的属性, 类型 - 是一个对象
// 参数三: 虚拟dom节点的内容, 类型 - 字符串/数组
const vNode = h('h1', { class: 'myH1', id: 'hh' }, '我是一个h1标签')
console.log(vNode);

// 等到dom渲染完成之后, 才能去挂载/渲染真实的dom节点
onMounted(() => {
  // 参数1: 虚拟dom
  // 参数2: 真实的dom, 虚拟dom的挂载点
  render(vNode, document.querySelector('.box')!)
})

</script>

<template>
  <div class="box">
    <!-- <h1 class="myH1" id="hh">我是一个h1标签</h1> -->
  </div>
</template>

<style scoped lang="less">
</style>